<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="fix">
        <a href="#"><img src="imgs/top.png" alt=""></a>
    </div>

    <div class="header">
        <div class="log"><img src="imgs/log.png" alt=""></div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
                <li>
                    <div class="box">
                        <div class="front">到这来</div>
                        <div class="bottom">我在这等你</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="search">
            <input type="text" value="输入关键词" /><button class="btn"></button>
        </div>
        <div class="user"><img src="imgs/user.png" alt="">
            <h3>&nbsp;qq-leishui
                <ul class="useset">


                    <li>
                        <div class="decration"></div> <a href="#">设置</a>
                        <hr>
                    </li>
                    <li><a href="#">退出</a></li>
                </ul>
            </h3>
        </div>
    </div>
    <div class="banner">
        <div class="w">
            <div class="subnav">
                <ul>
                    <!-- <span>&gt;</span>
<span>&gt;</span>
<span>&gt;</span>
<span>&gt;</span>
<span>&gt;</span>
<span>&gt;</span>
<span>&gt;</span>
<span>&gt;</span>
<span>&gt;</span> -->
                    <li><a href="#">前端学习</a></li>
                    <li><a href="#">前端学习</a></li>
                    <li><a href="#">前端学习</a></li>
                    <li><a href="#">前端学习</a></li>
                    <li><a href="#">前端学习</a></li>
                    <li><a href="#">前端学习</a></li>
                    <li><a href="#">前端学习</a></li>
                    <li><a href="#">前端学习</a></li>
                    <li><a href="#">前端学习</a></li>
                </ul>
            </div>
            <div class="pic">
                <div class="dev">
                    &lt;
                </div>
                <div class="prv">
                    &gt;
                </div>
                <ul>
                    <li class="first"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="course">
                <h3>我的课程表</h3>
                <div class="bd">
                    <ul>
                        <li>继续学习 程序语言设计
                            <p>正在学习--使用对象</p>
                        </li>
                        <li>继续学习 程序语言设计
                            <p>正在学习--使用对象</p>
                        </li>
                        <li>继续学习 程序语言设计
                            <p>正在学习--使用对象</p>
                        </li>
                    </ul>
                    <button>全部课程</button>
                </div>

            </div>
        </div>
    </div>
    <div class="subban">
        <div class="title">
            <h4>精品推荐</h4>
        </div>
        <div class="subl">
            <ul>
                <li><span>|</span> jQuery</li>
                <li><span>|</span>Spark</li>
                <li><span>|</span>MySQL</li>
                <li><span>|</span>Javaweb</li>
                <li><span>|</span>MySQL</li>
                <li><span>|</span>Javaweb</li>
            </ul>
        </div>
        <div class="lianj"><a href="#">修改兴趣</a></div>
    </div>
    <div class="jingpintj">
        <div class="tuij">
            <h4>精品推荐</h4>
            <a href="#">查看全部</a>
        </div>
        <div class="lieb">
            <ul>
                <li><em><img src="imgs/hot.png" alt=""></em>
                    <a href="#"><img src="imgs/timg.jpg" alt="">
                        <h3>星空象征着未来和希望</h3>
                    </a>
                </li>
                <li><em><img src="imgs/hot.png" alt=""></em>
                    <a href="#"><img src="imgs/timg.jpg" alt="">
                        <h3>星空象征着未来和希望</h3>
                    </a>
                </li>
                <li><em><img src="imgs/hot.png" alt=""></em>
                    <a href="#"><img src="imgs/timg.jpg" alt="">
                        <h3>星空象征着未来和希望</h3>
                    </a>
                </li>
                <li><em><img src="imgs/hot.png" alt=""></em>
                    <a href="#"><img src="imgs/timg.jpg" alt="">
                        <h3>星空象征着未来和希望</h3>
                    </a>
                </li>
                <li><em><img src="imgs/hot.png" alt=""></em>
                    <a href="#"><img src="imgs/timg.jpg" alt="">
                        <h3 class="ellipsis">星空象征着未来和希望 星空象征着未来和希望</h3>
                    </a>
                </li>
                <li><em><img src="imgs/hot.png" alt=""></em>
                    <a href="#"><img src="imgs/timg.jpg" alt="">
                        <h3>星空象征着未来和希望</h3>
                    </a>
                </li>
                <li><em><img src="imgs/hot.png" alt=""></em>
                    <a href="#"><img src="imgs/timg.jpg" alt="">
                        <h3>星空象征着未来和希望</h3>
                    </a>
                </li>
                <li><em><img src="imgs/hot.png" alt=""></em>
                    <a href="#"><img src="imgs/timg.jpg" alt="">
                        <h3>星空象征着未来和希望</h3>
                    </a>
                </li>
                <li><em><img src="imgs/hot.png" alt=""></em>
                    <a href="#"><img src="imgs/timg.jpg" alt="">
                        <h3>星空象征着未来和希望</h3>
                    </a>
                </li>
                <li><em><img src="imgs/hot.png" alt=""></em>
                    <a href="#"><img src="imgs/timg.jpg" alt="">
                        <h3>星空象征着未来和希望</h3>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="sing">
        <div></div>
        <!-- <img src="imgs/sing.jpg" alt=""> -->
        <p>夜空中最亮的星 能否听清 那仰望的人 夜空中最亮的星 心底的孤独和叹息 oh夜空中最亮的星 能否记起 曾与我同行 消失在风里的身影 我祈祷拥有一颗透明的心灵 和会流泪的眼睛 给我再去相信的勇气 oh越过谎言去拥抱你 每当我找不到存在的意义 每当我迷失在黑夜里 oh~夜空中最亮的星 请指引我靠近你 夜空中最亮的星 是否知道 曾与我同行的身影 如今在哪里 oh夜空中最亮的星 是否在意 是等太阳升起 还是意外先来临 我宁愿所有痛苦都留在心里 也不愿忘记你的眼睛 给我再去相信的勇气 oh越过谎言去拥抱你
            每当我找不到存在的意义 每当我迷失在黑夜里 oh~夜空中最亮的星 oh请照亮我前行 我祈祷拥有一颗透明的心灵 和会流泪的眼睛 给我再去相信的勇气 oh越过谎言去拥抱你 每当我找不到存在的意义 每当我迷失在黑夜里 oh~夜空中最亮的星 请照亮我前行 夜空中最亮的星 能否听清 那仰望的人 心底的孤独和叹息</p>
    </div>
    <div class="page">
        <ul>
            <li><a href="./html/translate.htm" target="_blank">1</a></li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>...</li>
            <li>100</li>
        </ul>
    </div>
    <div class="footer">
        <div class="w">
            <div class="left">
                <img src="imgs/log.png" alt="">
                <p>无数夜晚,漫天星斗--- 还是在路上,还是十年前,星空下仰望的少年。其实照亮我们前行的,从来都不是夜空中最亮的星,而是我们自己;最动人的,也并非一句歌</p>
                <button>下载</button>
            </div>
            <dl>
                <dt>关于此页</dt>
                <dd>关于</dd>
                <dd>关于团队</dd>
                <dd>工作机会</dd>
                <dd>客户服务</dd>
                <dd>补助</dd>
            </dl>
            <dl>
                <dt>新手指南</dt>
                <dd>文档</dd>
                <dd>这是什么</dd>
                <dd>那是什么</dd>
            </dl>
            <dl class="last">
                <dt>合作伙伴</dt>
                <dd>合作机构</dd>
                <dd>合作导师</dd>
            </dl>
        </div>
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(".pic ul li:first").css("background-color", "orange")
        $(".pic ul li").click(function() {
                $(".pic ul li").css("background", "white")
                $(this).css("background-color", "orange")
            }

        );
        $(".user h3").bind('mouseover mouseout ', function(event) {
            if (event.type == "mouseover") {
                $(".useset").css("display", "block");
            } else {
                $(".useset").css("display", "none");
            }

        });
        $("input").focus(function() {
            if ($("input").val() == "输入关键字") {
                $("input").val("");
            }
        })
        $("input").blur(function() {
            if ($("input").val() == "") {
                $("input").val("输入关键字")
            }
        })
    </script>


</body>

</html>